<template>
  <div class="home">
    <div class="slider">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item>
          <img src="@/assets/img/poster1.jpg" width="100%" height="100%" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/img/poster2.jpg" width="100%" height="100%" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/img/poster3.jpg" width="100%" height="100%" alt />
        </el-carousel-item>
      </el-carousel>
    </div>

    <searchbar></searchbar>
    <frame></frame>
  </div>
</template>

<script>
import searchbar from '@/components/smallComponent/search.vue'
import frame from '@/components/smallComponent/frame.vue'
export default {
  components: {
    searchbar,
    frame,
  },
  data() {
    return {
      input1: '',
    }
  },
}
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.searchbar {
  margin: 5px 0;
  border-top: 1px solid rgb(205, 205, 205);
  border-bottom: 1px solid rgb(205, 205, 205);
  .search_barcontainer {
    width: 1460px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
}

.goodtype {
  width: 1180px;
  // height: 300px;
  // background-color: skyblue;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  > div:nth-child(1) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > div {
      width: 240px;
      padding-top: 10px;
      // height: 60px;
      background-color: rgb(30, 150, 237);
      padding-right: 10px;
      ul {
        list-style: none;
        li {
          width: 100%;
          text-align: right;
          margin: 10px 0;
          color: #fff;
          color: rgb(245, 237, 249);
          font-size: 17px;
          cursor: pointer;
        }
      }
    }
  }
  > div:nth-child(2) {
    transform: translateY(2px);
    position: relative;
    .title_text {
      position: absolute;
      top: 8px;
      left: 50px;
      color: rgb(101, 101, 101);
      font-size: 17px;
    }
    .infotext {
      width: 890px;
      ul {
        list-style: none;
        li {
          h3,
          p {
            margin: 8px 0;
          }
          p {
            color: rgb(101, 101, 101);
          }
        }
      }
    }
  }
}
</style>
